import { useEffect, useRef, useState } from 'react'
import { getShapeStyle } from '@/mock/style'
//导入 css 样式 
import '@/pages/Home/css/EditorWrapper/EditorWrapper.scss'
import { useDispatch } from 'react-redux'
// 导入仓库中的
import { setIterm, updateIterm } from '@/store/modules/modules'
export default function EditorDragger(props: any) {
    const dispatch = useDispatch()
    const [isButton, setIsButton] = useState<any>(null)
    const [isshow, setisshow] = useState(true)
    //获取得是要拖拽得组件
    const editorWrapper = useRef(null)
    //封装一个函数 用来计算 拖拽组件元素得 left和top
    const countlt = (e: any) => {
        //获取画布得dom
        var container: any = document.getElementById('box-canvas')
        const { left: xx, top: yy } = container.getBoundingClientRect()
        //计算left和top
        const left = e.clientX - xx - gap.x;
        const top = e.clientY - yy - gap.y;
        return {
            left, top
        }
    }
    //把鼠标拖拽得距离盒子边框位置 x和y
    const gap = {
        x: 0,
        y: 0
    }
    const caculateSize = (
        direction: any,    // 调整方向，例如 'top-left', 'top-right' 等
        e: any,                 // 鼠标事件对象
        positions: any   // 初始位置信息
    ) => {
        const { clientX, clientY } = e
        // 获取鼠标事件的坐标信息
        const { left, right, top, bottom } = positions  // 获取初始位置信息
        const container: any = document.getElementById('box-canvas')  // 获取包裹元素
        const { left: x1, top: y1 } = container.getBoundingClientRect()
        const rightWidth = clientX - left;  // 计算右侧宽度
        //   debugger
        const leftWidth = right - clientX;   // 计算左侧宽度
        const bottomHeight = clientY - top;  // 计算底部高度
        const topHeight = bottom - clientY;   // 计算顶部高度
        const topOffset = clientY - y1;  // 计算顶部偏移
        const leftOffset = clientX - x1;  // 计算左侧偏移
        console.log(clientX, clientY)
        console.log('direction', leftOffset, container.offsetLeft);
        switch (direction) {
            // 左上角
            case 'top-left':
                return {
                    width: leftWidth,
                    height: topHeight,
                    top: topOffset,
                    left: leftOffset,
                }
            //右上角
            case 'top-right':
                return {
                    width: rightWidth,
                    height: topHeight,
                    top: topOffset,
                }
            // 左下角
            case 'bottom-left':
                return {
                    width: leftWidth,
                    height: bottomHeight,
                    left: leftOffset,
                }
            //右下角
            case 'bottom-right':
                return {
                    width: rightWidth,
                    height: bottomHeight,
                }
            default:
                break
        }
    }
    //实现拉
    const startResize = (direction: any, e: any) => {
        console.log('执行拉取操作')
        //当前组件
        var currentElement: any = editorWrapper.current
        //获取当前组件的视口的数据
        const {
            left,
            right,
            top,
            bottom,
        } = currentElement.getBoundingClientRect()
        //mousemove  拉取移动
        const mousemove = (e: any) => {
            console.log('---拉mousemove--')
            const size = caculateSize(direction, e, { left, right, top, bottom })
            //组件元素
            const { style } = currentElement
            if (size) {
                style.width = size.width + 'px'
                style.height = size.height + 'px'
                if (size.left) {
                    style.left = size.left + 'px'
                }
                if (size.top) {
                    style.top = size.top + 'px'
                }
            }
            console.log('style.width', style.width);
        }
        //mouseup    拉取鼠标抬起---重新计算left和top-》更新到仓库里
        const mouseup = (e: any) => {
            document.removeEventListener('mousemove', mousemove)
            //获取最新height  width  left  top
            const size = caculateSize(direction, e, { left, right, top, bottom })
            dispatch(updateIterm({ ...size }))
            document.removeEventListener('mouseup', mouseup)
        }
        //触发鼠标移动事件  和鼠标得抬起事件
        document.addEventListener('mousemove', mousemove)
        document.addEventListener('mouseup', mouseup)
        //阻止事件冒泡
        e.stopPropagation();
    }
    //鼠标按下
    const mousedown = (event: any) => {
        // console.log('---mousedown--')
        //获取目前要拖拽得组件
        const currentElement: any = editorWrapper.current
        //判断
        if (currentElement) {
            //获取当前拖拽组件距离视口得坐标  x1和y1
            const { left: x1, top: y1 } = currentElement.getBoundingClientRect()
            //计算 x和y
            gap.x = event.clientX - x1
            gap.y = event.clientY - y1
        }
        //mousemove  拖拽移动
        const mousemove = (e: any) => {
            // console.log('---mousemove--')
            //计算top和left
            const { left, top } = countlt(e)
            if (currentElement) {
                currentElement.style.left = left + 'px'
                currentElement.style.top = top + 'px'
            }
        }
        const mouseup = (e: any) => {
            //清除下鼠标移动事件
            document.removeEventListener('mousemove', mousemove)
            // console.log('---mouseup--')
            const { left, top } = countlt(e)
            // console.log(left, top, '拖拽完事儿后获取得组件left和top')
            //更新到仓库里
            dispatch(updateIterm({ left, top }))
            dispatch(setIterm(props.element))
            setisshow(!isshow)
        }
        //触发鼠标移动事件  和鼠标得抬起事件
        document.addEventListener('mousemove', mousemove)
        document.addEventListener('mouseup', mouseup)
        //把组件在鼠标按下得时候 做选中操作
        dispatch(setIterm(props.element))
        //阻止事件冒泡
        event.stopPropagation();
    }
    //判断组件类型
    //文字 input
    useEffect(() => {
        if (props.element.component  === "Dtext") {
            setIsButton('这是文本')
        }
        if (props.element.component  === "drag-button") {
            setIsButton('这是按钮')
        }
        if (props.element.component  === "Dimg") {
            setIsButton('这是图片')
        }
    }, [props.element.component])
    if (props.element.component === "Dtext") {
        var content: any = <input placeholder={props.element.propLable} />
    }
    //button
    if (props.element.component === "drag-button") {
        var content: any = <button>{props.element.lable}</button>
    }
    //图片
    if (props.element.component === "Dimg") {
        var content: any = <img draggable={false} src={props.element.propLable} alt="" />
    }
    // 点击选中
    const handleChange = () => {
        dispatch(setIterm(props.element))
    }
    return (
        <div onClick={handleChange} style={getShapeStyle(props.element.style)} className={isshow ? 'edit-wrapper active' : 'edit-wrapper'} ref={editorWrapper} onMouseDown={mousedown} >
            {content}
            <div className="container">
                <div className="photo-container">
                    <div className="annotation">
                        <p>{isButton}</p>
                    </div>
                </div>
            </div>
            <div className="resizers">
                <div
                    className="resizer top-left"
                    onMouseDown={(e) => { startResize('top-left', e) }}
                ></div>
                <div
                    className="resizer top-right"
                    onMouseDown={(e) => { startResize('top-right', e) }}
                ></div>
                <div
                    className="resizer bottom-left"
                    onMouseDown={(e) => { startResize('bottom-left', e) }}
                ></div>
                <div
                    className="resizer bottom-right"
                    onMouseDown={(e) => { startResize('bottom-right', e) }}
                ></div>
            </div>
        </div>
    )
}
